<template>
	<div class="common-layout">
		<el-container>
			<el-header
				style="text-align: right; font-size: 12px; margin-bottom: 30px"
			>
				<div class="toolbar">
					<el-dropdown>
						<!--						设置-->
						<el-icon style="margin-right: 8px; margin-top: 1px">
							<setting />
						</el-icon>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<span>admin</span>
				</div>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<el-menu
						:default-active="AdminMenu.active"
						@open="handleOpen"
						style="height: 100vh"
						router
					>
						<el-menu-item v-for="menu in state.menuList" :index="menu.path"
							><span>{{ menu.title }}</span></el-menu-item
						>
					</el-menu>
				</el-aside>
				<el-main style="height: 100vh"> <router-view /></el-main>
			</el-container>
		</el-container>
	</div>

</template>
<script lang="ts" setup>
import { Setting } from '@element-plus/icons-vue'
import { adminMenu } from '~/stores/adminMenu'

const AdminMenu = adminMenu()
import { useRouter } from 'vue-router'

const UserLogin = userLogin()
const router = useRouter()
const state = reactive({
	menuList: [
		{ title: '首页', path: '/adminIndex' },
		{ title: '轮播管理', path: '/adminCarousel' },
		{ title: '动漫管理', path: '/adminItem' },
		{ title: '章节管理', path: '/adminArticle' },
		{ title: '用户管理', path: '/adminUser' },
		// { title: '沟通管理', path: '/adminInteract' },
		{ title: '用户界面', path: '/' },
	],
})

/**
 * 退出登录
 */
function logout() {
	http.post('/user/logout').then(() => {
		router.push('/login')
		//清空
		UserLogin.token = undefined
		UserLogin.isLogin = false
	})
}

const handleOpen = (key: string) => {
	AdminMenu.active = key
}
</script>

<style scoped>
.el-header {
	position: relative;
	background-color: var(--el-color-primary-light-7);
	color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
	color: var(--el-text-color-primary);
	background: var(--el-color-primary-light-8);
	height: 100vh;
}

.el-menu {
	border-right: none;
}

.el-main {
	padding: 0;
}

.toolbar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	right: 20px;
}
</style>
